import React from 'react';
import { IndustryC, FirstHeaderC, SecondHeaderC, PrimaryC } from '@/src/components';
import { Form } from 'antd';

class IndustryDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      init2: undefined,
      init4: undefined,
    };
    setTimeout(() => {
      this.setState({
        init2: '460000',
        init4: ['720000', '460000'],
      });
    }, 3000);
  }

  onClick1 = () => {
    this.state.IndustryC1.setSelect('720000');
  };

  onClick11 = () => {
    this.state.IndustryC11.setSelect('720000');
  };

  onClick2 = () => {
    this.state.IndustryC2.setSelect('720000');
  };

  onClick3 = () => {
    this.state.IndustryC3.setSelect(['720000']);
  };

  onClick31 = () => {
    this.state.IndustryC31.setSelect(['720000']);
  };

  onClick4 = () => {
    this.state.IndustryC4.setSelect(['410000', '110000']);
  };

  // 单选模式
  ref1 = React.createRef();

  ref2 = React.createRef();

  ref3 = React.createRef();

  ref4 = React.createRef();

  ref5 = React.createRef();

  ref6 = React.createRef();

  ref7 = React.createRef();

  ref8 = React.createRef();

  ref9 = React.createRef();

  ref10 = React.createRef();

  ref11 = React.createRef();

  ref12 = React.createRef();

  //
  render() {
    return (
      <div style={{ padding: '20px', width: '500px' }}>
        <FirstHeaderC title='单选模式' />
        <SecondHeaderC title='1.同步初始化,1层树形结构' />
        <Form ref={this.ref1}>
          <IndustryC
            form={this.ref1.current}
            dataIndex='industry1'
            multiple={false}
            onRef={(ref) => this.setState({ IndustryC1: ref })}
            initialValue={'420000'}
            onChange={(e) => console.log(e)}
            isTree={true}
            treeNode={1}
          />
        </Form>
        <SecondHeaderC title='1.1同步初始化,2层树形结构' />
        <Form ref={this.ref2}>
          <IndustryC
            form={this.ref2.current}
            dataIndex='industry111'
            multiple={false}
            onRef={(ref) => this.setState({ IndustryC111: ref })}
            initialValue={'420300'}
            onChange={(e) => console.log(e)}
            isTree={true}
            treeNode={2}
          />
        </Form>
        <SecondHeaderC title='1.22同步初始化,3层树形结构' />
        <Form ref={this.ref3}>
          <IndustryC
            form={this.ref3.current}
            dataIndex='industry222'
            multiple={false}
            onRef={(ref) => this.setState({ IndustryC111: ref })}
            initialValue={'420000'}
            onChange={(e) => console.log(e)}
            isTree={true}
            treeNode={3}
          />
        </Form>
        <SecondHeaderC title='1.2 同步初始化,1级数据，非树形结构' />
        <Form ref={this.ref4}>
          <IndustryC
            form={this.ref4.current}
            dataIndex='industry11'
            multiple={false}
            onRef={(ref) => this.setState({ IndustryC11: ref })}
            initialValue={'420000'}
            onChange={(e) => console.log(e)}
            isTree={false}
            treeNode={1}
          />
        </Form>
        <PrimaryC onClick={this.onClick11} title='更改数据' />

        <SecondHeaderC title='1.3同步初始化,2级数据，非树形结构' />
        <Form ref={this.ref5}>
          <IndustryC
            form={this.ref5.current}
            dataIndex='industry12'
            multiple={false}
            onRef={(ref) => this.setState({ IndustryC12: ref })}
            initialValue={'420300'}
            onChange={(e) => console.log(e)}
            isTree={false}
            treeNode={2}
          />
        </Form>

        <SecondHeaderC title='1.3同步初始化,3级数据，非树形结构' />
        <Form ref={this.ref6}>
          <IndustryC
            form={this.ref6.current}
            dataIndex='industry13'
            multiple={false}
            onRef={(ref) => this.setState({ IndustryC13: ref })}
            initialValue={'420301'}
            onChange={(e) => console.log(e)}
            isTree={false}
            treeNode={3}
          />
        </Form>
        <SecondHeaderC title='2.异步初始化' />
        <Form ref={this.ref7}>
          <IndustryC
            form={this.ref7.current}
            dataIndex='industry2'
            multiple={false}
            onRef={(ref) => this.setState({ IndustryC2: ref })}
            initialValue={this.state.init2}
            onChange={(e) => console.log(e)}
          />
        </Form>

        <PrimaryC onClick={this.onClick2} title='更改数据' />

        <FirstHeaderC title='多选模式' />
        <SecondHeaderC title='3.树形同步初始化' />
        <Form ref={this.ref8}>
          <IndustryC
            form={this.ref8.current}
            dataIndex='industry3'
            onRef={(ref) => this.setState({ IndustryC3: ref })}
            initialValue={['420000', '460000']}
            onChange={(e) => console.log(e)}
          />
        </Form>
        <PrimaryC onClick={this.onClick3} title='更改数据' />
        <SecondHeaderC title='3.1非树形同步初始化' />
        <Form ref={this.ref9}>
          <IndustryC
            form={this.ref9.current}
            dataIndex='industry31'
            onRef={(ref) => this.setState({ IndustryC31: ref })}
            initialValue={['420000', '460000']}
            onChange={(e) => console.log(e)}
            isTree={false}
            treeNode={1}
          />
        </Form>
        <PrimaryC onClick={this.onClick31} title='更改数据' />
        <SecondHeaderC title='4.异步初始化' />
        <Form ref={this.ref10}>
          <IndustryC
            form={this.ref10.current}
            dataIndex='industry4'
            onRef={(ref) => this.setState({ IndustryC4: ref })}
            initialValue={this.state.init4}
            onChange={(e) => console.log(e)}
          />
        </Form>

        <PrimaryC onClick={this.onClick4} title='更改数据' />

        <FirstHeaderC title='其他设置' />
        <SecondHeaderC title='5.设置rules、helper、权限、layout' />
        <Form ref={this.ref11}>
          <IndustryC
            form={this.ref11.current}
            dataIndex='industry5'
            rules={[{ required: true, message: '请选择组合!' }]}
            helper='lalal'
            authority={'write'}
            allowClear={true}
            formItemLayout={{
              labelCol: {
                span: 8,
                offset: 2,
              },
              wrapperCol: {
                span: 12,
                offset: 2,
              },
            }}
          />
        </Form>

        <SecondHeaderC title='6.显示checkbox' />
        <Form ref={this.ref12}>
          <IndustryC form={this.ref12.current} dataIndex='industry6' helper='lalal' onChange={(e) => console.log(e)} treeCheckable={true} />
        </Form>
      </div>
    );
  }
}

export default IndustryDemo;
